<template>
  <span>
    <input ref="input" class="my-input" :value="value" @input="inputEvent" />
  </span>
</template>
<script>
export default {
  name: "MyInput",
  props: {
    value: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    InputEvent(event) {
      this.$emit("input", event.target.value);
    },
  },
};
</script>
<style scoped>
.my-input {
  width: 200px;
  height: 40px;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 14px;
}
.my-input:focus {
  border: 1px solid #409eff;
}
</style>
